<template>
  <div>
    {{isLogin}}
    <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
    <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <mt-button @click="doLogin" type="primary" size="large">登录</mt-button>
  </div>
</template>

<script>
import {
  mapActions,
  mapGetters,
  mapMutations
} from 'vuex'
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  computed: {
    ...mapGetters([
      'isLogin'
    ])
  },
  // 第一种需求：如果用户已经登录，就跳转到指定页面
  // beforeRouteEnter (to, from, next) {
  //   next(vm => {
  //     if (vm.isLogin) {
  //       vm.$router.push('/mine')
  //     }
  //   })
  // },
  // 第二种需求，用户重新登录，最好的方法就是清除登录信息
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.isLogin) {
        vm.updateUserInfo({
          displayName: '',
          token: ''
        })
      }
    })
  },
  watch: {
    // 处理登录成功之后的跳转，因为使用了action向服务器发送登录请求，所以咱们在这里实际上并不能直接获取到是否登录，需要从store里去取这个登录的状态，通过监听这个状态的改变，然后判断是否登录
    isLogin () {
      if (this.isLogin === true) {
        // 如果登录成功，就跳转， 获取全局导航守卫（@/main.js -> router.beforeEach里面）传递过来的参数，决定往哪儿跳
        // 如果没有参数，就默认到 '/mine', 这种情况是由用户直接访问登录页造成的。
        const { comeFrom = '/mine' } = this.$route.params
        this.$router.push(comeFrom)
      }
    }
  },
  methods: {
    doLogin () {
      const {
        username,
        password
      } = this
      this.login({
        username,
        password
      })
    },
    ...mapActions([
      'login'
    ]),
    ...mapMutations([
      'updateUserInfo'
    ])
  }
}
</script>

<style>

</style>
